<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站相册列表 - 筛选查询</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #eef0ff;
            --secondary: #6c757d;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #23c16b;
            --danger: #e53e3e;
            --border: #e9ecef;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
            --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f7fa;
            color: var(--dark);
            padding-top: 20px;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-header {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }
        
        .page-title {
            color: var(--dark);
            font-weight: 700;
        }
        
        .filter-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .filter-header {
            margin-bottom: 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .filter-title {
            font-weight: 600;
            color: var(--primary);
            display: flex;
            align-items: center;
        }
        
        .filter-title i {
            margin-right: 8px;
        }
        
        .clear-filters {
            color: var(--secondary);
            background: none;
            border: none;
            padding: 4px 8px;
            font-size: 0.9rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: color 0.2s;
        }
        
        .clear-filters i {
            margin-right: 5px;
        }
        
        .clear-filters:hover {
            color: var(--danger);
        }
        
        .filter-group {
            margin-bottom: 1.5rem;
        }
        
        .filter-label {
            font-weight: 500;
            margin-bottom: 0.75rem;
            display: block;
            color: var(--dark);
        }
        
        .search-box {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 0.95rem;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        
        .search-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
            outline: none;
        }
        
        .search-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--secondary);
        }
        
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .filter-tag {
            background-color: var(--light);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
        }
        
        .filter-tag i {
            margin-right: 5px;
            font-size: 0.8rem;
        }
        
        .filter-tag:hover {
            background-color: var(--primary-light);
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .filter-tag.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .range-slider {
            width: 100%;
            margin: 1rem 0;
        }
        
        .range-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        .view-options {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 1.5rem;
            gap: 0.5rem;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 8px 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-btn:hover, .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .sort-options {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            gap: 1rem;
        }
        
        .sort-label {
            font-weight: 500;
            color: var(--secondary);
        }
        
        .sort-select {
            padding: 6px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background-color: white;
            font-size: 0.9rem;
        }
        
        /* 相册通用样式 */
        .album-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .album-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .album-media {
            position: relative;
            overflow: hidden;
            height: 180px;
        }
        
        .album-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .album-card:hover .album-image {
            transform: scale(1.05);
        }
        
        .album-info {
            padding: 1rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .album-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            transition: color 0.2s;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .album-card:hover .album-title {
            color: var(--primary);
        }
        
        .album-desc {
            color: var(--secondary);
            font-size: 0.85rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex-grow: 1;
        }
        
        .album-meta {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            font-size: 0.85rem;
        }
        
        .album-author {
            display: flex;
            align-items: center;
            color: var(--secondary);
        }
        
        .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 6px;
            object-fit: cover;
        }
        
        .album-stats {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: var(--secondary);
            margin-bottom: 0.75rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
        }
        
        .stat-item i {
            margin-right: 4px;
            font-size: 0.9rem;
        }
        
        .album-actions {
            display: flex;
            justify-content: space-between;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border);
        }
        
        .action-btn {
            color: var(--secondary);
            background: none;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .action-btn:hover {
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        .action-btn i {
            margin-right: 5px;
        }
        
        .action-btn.liked {
            color: var(--primary);
        }
        
        .action-btn.saved {
            color: var(--danger);
        }
        
        /* 特殊状态样式 */
        .no-image {
            background-color: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary);
        }
        
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 4px;
            display: flex;
            align-items: center;
        }
        
        .image-count i {
            margin-right: 3px;
        }
        
        .album-category {
            position: absolute;
            top: 8px;
            left: 8px;
            background-color: var(--primary);
            color: white;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: 500;
        }
        
        /* 列表视图样式 */
        .list-view .album-item {
            display: flex;
            margin-bottom: 1.5rem;
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .list-view .album-item:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }
        
        .list-view .album-media {
            width: 200px;
            flex-shrink: 0;
            height: auto;
        }
        
        .list-view .album-info {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            padding: 1.25rem;
        }
        
        .list-view .album-title {
            font-size: 1.1rem;
            margin-bottom: 0.75rem;
        }
        
        .list-view .album-actions {
            margin-left: auto;
            border-top: none;
            padding-top: 0;
            flex-shrink: 0;
        }
        
        .list-view .album-content {
            display: flex;
            flex-grow: 1;
        }
        
        .list-view .album-details {
            flex-grow: 1;
        }
        
        .list-view .album-stats {
            justify-content: flex-start;
            gap: 2rem;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .list-view .album-item {
                flex-direction: column;
            }
            
            .list-view .album-media {
                width: 100%;
                height: 200px;
            }
            
            .list-view .album-content {
                flex-direction: column;
            }
            
            .list-view .album-actions {
                margin-top: 1rem;
                margin-left: 0;
                padding-top: 0.75rem;
                border-top: 1px solid var(--border);
            }
        }
        
        @media (max-width: 768px) {
            .filter-section {
                padding: 1rem;
            }
            
            .filter-row {
                flex-direction: column;
            }
            
            .filter-col {
                width: 100% !important;
                margin-bottom: 1rem;
            }
            
            .view-options {
                justify-content: center;
            }
            
            .sort-options {
                justify-content: center;
                flex-wrap: wrap;
            }
        }
        
        /* 筛选结果提示 */
        .filter-results {
            background-color: var(--primary-light);
            border-left: 3px solid var(--primary);
            padding: 0.75rem 1rem;
            margin-bottom: 1.5rem;
            border-radius: 0 4px 4px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .results-text {
            font-size: 0.95rem;
            color: var(--primary);
        }
        
        .applied-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1rem;
        }
        
        .applied-filter {
            background-color: white;
            border: 1px solid var(--primary);
            border-radius: 15px;
            padding: 2px 10px;
            font-size: 0.8rem;
            color: var(--primary);
            display: flex;
            align-items: center;
        }
        
        .applied-filter i {
            margin-left: 5px;
            cursor: pointer;
            font-size: 0.75rem;
        }
        
        .applied-filter i:hover {
            color: var(--danger);
        }
        
        /* 加载更多按钮 */
        .load-more {
            display: block;
            margin: 2rem auto;
            padding: 0.75rem 2rem;
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .load-more:hover {
            background-color: var(--primary);
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1 class="page-title">相册探索</h1>
            <p class="text-secondary">发现并探索感兴趣的相册内容</p>
        </div>
        
        <!-- 筛选区域 -->
        <div class="filter-section">
            <div class="filter-header">
                <h3 class="filter-title"><i class="fas fa-filter"></i> 筛选条件</h3>
                <button class="clear-filters" id="clearAllFilters"><i class="fas fa-times"></i> 清除全部筛选</button>
            </div>
            
            <div class="row filter-row">
                <!-- 搜索框 -->
                <div class="col-md-4 filter-col">
                    <div class="filter-group">
                        <label class="filter-label">搜索相册</label>
                        <div class="search-box">
                            <i class="fas fa-search search-icon"></i>
                            <input type="text" class="search-input" id="albumSearch" placeholder="输入相册名称、描述或作者...">
                        </div>
                    </div>
                </div>
                
                <!-- 分类筛选 -->
                <div class="col-md-4 filter-col">
                    <div class="filter-group">
                        <label class="filter-label">相册分类</label>
                        <div class="filter-tags" id="categoryFilters">
                            <div class="filter-tag active" data-filter="all"><i class="fas fa-th"></i> 全部</div>
                            <div class="filter-tag" data-filter="travel"><i class="fas fa-plane"></i> 旅行</div>
                            <div class="filter-tag" data-filter="photography"><i class="fas fa-camera"></i> 摄影</div>
                            <div class="filter-tag" data-filter="food"><i class="fas fa-utensils"></i> 美食</div>
                            <div class="filter-tag" data-filter="pet"><i class="fas fa-paw"></i> 宠物</div>
                            <div class="filter-tag" data-filter="art"><i class="fas fa-palette"></i> 艺术</div>
                            <div class="filter-tag" data-filter="life"><i class="fas fa-home"></i> 生活</div>
                        </div>
                    </div>
                </div>
                
                <!-- 图片数量筛选 -->
                <div class="col-md-4 filter-col">
                    <div class="filter-group">
                        <label class="filter-label">图片数量</label>
                        <div class="filter-tags" id="imageCountFilters">
                            <div class="filter-tag active" data-filter="all"><i class="fas fa-images"></i> 全部</div>
                            <div class="filter-tag" data-filter="single"><i class="fas fa-image"></i> 单张图片</div>
                            <div class="filter-tag" data-filter="multiple"><i class="fas fa-th"></i> 多张图片</div>
                            <div class="filter-tag" data-filter="none"><i class="fas fa-file"></i> 无图片</div>
                        </div>
                    </div>
                </div>
                
                <!-- 日期筛选 -->
                <div class="col-md-4 filter-col">
                    <div class="filter-group">
                        <label class="filter-label">创建日期</label>
                        <div class="filter-tags" id="dateFilters">
                            <div class="filter-tag active" data-filter="all"><i class="fas fa-calendar"></i> 全部时间</div>
                            <div class="filter-tag" data-filter="today"><i class="fas fa-sun"></i> 今天</div>
                            <div class="filter-tag" data-filter="week"><i class="fas fa-calendar-week"></i> 本周</div>
                            <div class="filter-tag" data-filter="month"><i class="fas fa-calendar-month"></i> 本月</div>
                            <div class="filter-tag" data-filter="year"><i class="fas fa-calendar-check"></i> 今年</div>
                        </div>
                    </div>
                </div>
                
                <!-- 热门程度筛选 -->
                <div class="col-md-4 filter-col">
                    <div class="filter-group">
                        <label class="filter-label">热门程度</label>
                        <div class="filter-tags" id="popularityFilters">
                            <div class="filter-tag active" data-filter="all"><i class="fas fa-fire"></i> 全部</div>
                            <div class="filter-tag" data-filter="mostLiked"><i class="fas fa-heart"></i> 最多点赞</div>
                            <div class="filter-tag" data-filter="mostViewed"><i class="fas fa-eye"></i> 最多浏览</div>
                            <div class="filter-tag" data-filter="mostCommented"><i class="fas fa-comment"></i> 最多评论</div>
                        </div>
                    </div>
                </div>
                
                <!-- 互动筛选 -->
                <div class="col-md-4 filter-col">
                    <div class="filter-group">
                        <label class="filter-label">我的互动</label>
                        <div class="filter-tags" id="interactionFilters">
                            <div class="filter-tag active" data-filter="all"><i class="fas fa-hand-pointer"></i> 全部</div>
                            <div class="filter-tag" data-filter="liked"><i class="fas fa-heart"></i> 我点赞的</div>
                            <div class="filter-tag" data-filter="saved"><i class="fas fa-bookmark"></i> 我收藏的</div>
                            <div class="filter-tag" data-filter="commented"><i class="fas fa-comment"></i> 我评论的</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 筛选结果提示 -->
        <div class="filter-results" id="filterResults" style="display: none;">
            <div>
                <div class="results-text"><span id="resultCount">0</span> 个符合条件的相册</div>
                <div class="applied-filters" id="appliedFiltersContainer"></div>
            </div>
            <button class="clear-filters" id="clearResultsFilters"><i class="fas fa-times"></i> 清除筛选</button>
        </div>
        
        <!-- 视图切换和排序 -->
        <div class="row">
            <div class="col-md-6">
                <div class="sort-options">
                    <span class="sort-label">排序方式:</span>
                    <select class="sort-select" id="sortOptions">
                        <option value="recommended">推荐排序</option>
                        <option value="newest">最新发布</option>
                        <option value="oldest">最早发布</option>
                        <option value="mostLiked">最多点赞</option>
                        <option value="mostViewed">最多浏览</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="view-options">
                    <button class="view-btn active" id="gridViewBtn" title="网格视图"><i class="fas fa-th"></i></button>
                    <button class="view-btn" id="listViewBtn" title="列表视图"><i class="fas fa-list"></i></button>
                </div>
            </div>
        </div>
        
        <!-- 相册列表 - 网格视图 -->
        <div class="grid-view" id="albumContainer">
            <div class="row">
                <!-- 相册1 - 旅行分类，多图 -->
                <div class="col-md-4 col-sm-6 mb-4 album-item" 
                     data-category="travel" 
                     data-image-count="multiple"
                     data-date="month"
                     data-likes="245"
                     data-views="1200"
                     data-comments="32">
                    <div class="album-card">
                        <div class="album-media">
                            <span class="album-category">旅行</span>
                            <img src="https://picsum.photos/600/400?random=1" alt="旅行相册封面" class="album-image">
                            <div class="image-count">
                                <i class="fas fa-images"></i> 12
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">夏日海岛旅行记</h3>
                            <p class="album-desc">记录在巴厘岛的美好时光，阳光、沙滩和海浪，还有当地的特色美食。</p>
                            <div class="album-meta">
                                <div class="album-author">
                                    <img src="https://picsum.photos/100/100?random=101" alt="作者头像" class="author-avatar">
                                    李明
                                </div>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 1.2k
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i> 32
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 245
                                </div>
                            </div>
                            <div class="album-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i> 点赞
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 相册2 - 摄影分类，单图 -->
                <div class="col-md-4 col-sm-6 mb-4 album-item" 
                     data-category="photography" 
                     data-image-count="single"
                     data-date="week"
                     data-likes="156"
                     data-views="856"
                     data-comments="18">
                    <div class="album-card">
                        <div class="album-media">
                            <span class="album-category">摄影</span>
                            <img src="https://picsum.photos/600/400?random=2" alt="摄影作品封面" class="album-image">
                            <div class="image-count">
                                <i class="fas fa-image"></i> 1
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">城市夜景长曝光</h3>
                            <p class="album-desc">夜晚的城市灯光璀璨，用长曝光记录车流的轨迹，展现城市的活力。</p>
                            <div class="album-meta">
                                <div class="album-author">
                                    <img src="https://picsum.photos/100/100?random=102" alt="作者头像" class="author-avatar">
                                    张华
                                </div>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 856
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i> 18
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 156
                                </div>
                            </div>
                            <div class="album-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i> 点赞
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 相册3 - 生活分类，无图 -->
                <div class="col-md-4 col-sm-6 mb-4 album-item" 
                     data-category="life" 
                     data-image-count="none"
                     data-date="year"
                     data-likes="98"
                     data-views="532"
                     data-comments="47">
                    <div class="album-card">
                        <div class="album-media no-image">
                            <span class="album-category">生活</span>
                            <i class="fas fa-book" style="font-size: 2rem;"></i>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">我的阅读笔记</h3>
                            <p class="album-desc">记录阅读过的书籍摘要和感悟，分享一些经典段落和个人思考。</p>
                            <div class="album-meta">
                                <div class="album-author">
                                    <img src="https://picsum.photos/100/100?random=103" alt="作者头像" class="author-avatar">
                                    王芳
                                </div>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 532
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i> 47
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 98
                                </div>
                            </div>
                            <div class="album-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i> 点赞
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 相册4 - 美食分类，多图 -->
                <div class="col-md-4 col-sm-6 mb-4 album-item" 
                     data-category="food" 
                     data-image-count="multiple"
                     data-date="week"
                     data-likes="189"
                     data-views="721"
                     data-comments="23">
                    <div class="album-card">
                        <div class="album-media">
                            <span class="album-category">美食</span>
                            <img src="https://picsum.photos/600/400?random=3" alt="美食相册封面" class="album-image">
                            <div class="image-count">
                                <i class="fas fa-images"></i> 8
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">周末烘焙时光</h3>
                            <p class="album-desc">记录第一次尝试制作的曲奇饼干和芝士蛋糕，味道还不错！</p>
                            <div class="album-meta">
                                <div class="album-author">
                                    <img src="https://picsum.photos/100/100?random=104" alt="作者头像" class="author-avatar">
                                    刘婷
                                </div>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 721
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i> 23
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 189
                                </div>
                            </div>
                            <div class="album-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i> 点赞
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 相册5 - 宠物分类，多图 -->
                <div class="col-md-4 col-sm-6 mb-4 album-item" 
                     data-category="pet" 
                     data-image-count="multiple"
                     data-date="today"
                     data-likes="532"
                     data-views="2100"
                     data-comments="86">
                    <div class="album-card">
                        <div class="album-media">
                            <span class="album-category">宠物</span>
                            <img src="https://picsum.photos/600/400?random=4" alt="宠物相册封面" class="album-image">
                            <div class="image-count">
                                <i class="fas fa-images"></i> 15
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">我家猫咪成长记</h3>
                            <p class="album-desc">从刚领养回家的小奶猫到现在的胖主子，记录它的每一个可爱瞬间。</p>
                            <div class="album-meta">
                                <div class="album-author">
                                    <img src="https://picsum.photos/100/100?random=105" alt="作者头像" class="author-avatar">
                                    赵阳
                                </div>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 2.1k
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i> 86
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 532
                                </div>
                            </div>
                            <div class="album-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i> 点赞
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 相册6 - 艺术分类，单图 -->
                <div class="col-md-4 col-sm-6 mb-4 album-item" 
                     data-category="art" 
                     data-image-count="single"
                     data-date="month"
                     data-likes="327"
                     data-views="1500"
                     data-comments="54">
                    <div class="album-card">
                        <div class="album-media">
                            <span class="album-category">艺术</span>
                            <img src="https://picsum.photos/600/400?random=5" alt="艺术作品封面" class="album-image">
                            <div class="image-count">
                                <i class="fas fa-image"></i> 1
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">手绘城市地图</h3>
                            <p class="album-desc">耗时一个月完成的城市手绘地图，包含了所有主要地标和街道。</p>
                            <div class="album-meta">
                                <div class="album-author">
                                    <img src="https://picsum.photos/100/100?random=106" alt="作者头像" class="author-avatar">
                                    陈艺
                                </div>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i> 1.5k
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i> 54
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i> 327
                                </div>
                            </div>
                            <div class="album-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i> 点赞
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <button class="load-more" id="loadMoreBtn">加载更多相册</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 筛选状态存储
        const filterState = {
            category: 'all',
            imageCount: 'all',
            date: 'all',
            popularity: 'all',
            interaction: 'all',
            searchQuery: ''
        };
        
        // DOM 元素
        const albumItems = document.querySelectorAll('.album-item');
        const filterTags = document.querySelectorAll('.filter-tag');
        const clearAllFiltersBtn = document.getElementById('clearAllFilters');
        const clearResultsFiltersBtn = document.getElementById('clearResultsFilters');
        const searchInput = document.getElementById('albumSearch');
        const sortSelect = document.getElementById('sortOptions');
        const gridViewBtn = document.getElementById('gridViewBtn');
        const listViewBtn = document.getElementById('listViewBtn');
        const albumContainer = document.getElementById('albumContainer');
        const filterResults = document.getElementById('filterResults');
        const resultCount = document.getElementById('resultCount');
        const appliedFiltersContainer = document.getElementById('appliedFiltersContainer');
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        
        // 初始化筛选标签点击事件
        filterTags.forEach(tag => {
            tag.addEventListener('click', function() {
                // 确定筛选类型
                let filterType = '';
                if (this.parentElement.id === 'categoryFilters') filterType = 'category';
                else if (this.parentElement.id === 'imageCountFilters') filterType = 'imageCount';
                else if (this.parentElement.id === 'dateFilters') filterType = 'date';
                else if (this.parentElement.id === 'popularityFilters') filterType = 'popularity';
                else if (this.parentElement.id === 'interactionFilters') filterType = 'interaction';
                
                // 更新同组中其他标签的状态
                this.parentElement.querySelectorAll('.filter-tag').forEach(t => {
                    t.classList.remove('active');
                });
                
                // 设置当前标签为激活状态
                this.classList.add('active');
                
                // 更新筛选状态
                filterState[filterType] = this.dataset.filter;
                
                // 应用筛选
                applyFilters();
            });
        });
        
        // 搜索框输入事件
        searchInput.addEventListener('input', function() {
            filterState.searchQuery = this.value.toLowerCase().trim();
            applyFilters();
        });
        
        // 排序选项变化事件
        sortSelect.addEventListener('change', function() {
            sortAlbums(this.value);
        });
        
        // 视图切换事件
        gridViewBtn.addEventListener('click', function() {
            gridViewBtn.classList.add('active');
            listViewBtn.classList.remove('active');
            albumContainer.classList.remove('list-view');
            albumContainer.classList.add('grid-view');
        });
        
        listViewBtn.addEventListener('click', function() {
            listViewBtn.classList.add('active');
            gridViewBtn.classList.remove('active');
            albumContainer.classList.remove('grid-view');
            albumContainer.classList.add('list-view');
        });
        
        // 清除所有筛选按钮事件
        clearAllFiltersBtn.addEventListener('click', clearAllFilters);
        clearResultsFiltersBtn.addEventListener('click', clearAllFilters);
        
        // 点赞和收藏按钮交互
        document.querySelectorAll('.like-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                if (icon.classList.contains('far')) {
                    // 点赞
                    icon.classList.remove('far');
                    icon.classList.add('fas', 'text-primary');
                    this.classList.add('liked');
                } else {
                    // 取消点赞
                    icon.classList.remove('fas', 'text-primary');
                    icon.classList.add('far');
                    this.classList.remove('liked');
                }
                // 更新筛选状态
                if (filterState.interaction === 'liked') {
                    applyFilters();
                }
            });
        });
        
        document.querySelectorAll('.save-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                if (icon.classList.contains('far')) {
                    // 收藏
                    icon.classList.remove('far');
                    icon.classList.add('fas', 'text-danger');
                    this.classList.add('saved');
                } else {
                    // 取消收藏
                    icon.classList.remove('fas', 'text-danger');
                    icon.classList.add('far');
                    this.classList.remove('saved');
                }
                // 更新筛选状态
                if (filterState.interaction === 'saved') {
                    applyFilters();
                }
            });
        });
        
        // 加载更多按钮事件
        loadMoreBtn.addEventListener('click', function() {
            // 模拟加载更多
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            setTimeout(() => {
                // 这里可以添加加载更多相册的逻辑
                this.innerHTML = '没有更多相册了';
                this.disabled = true;
                this.style.opacity = '0.7';
            }, 1500);
        });
        
        // 应用所有筛选条件
        function applyFilters() {
            let visibleCount = 0;
            const appliedFilters = [];
            
            // 收集应用的筛选条件
            for (const [type, value] of Object.entries(filterState)) {
                if (value !== 'all' && value !== '') {
                    appliedFilters.push({ type, value });
                }
            }
            
            // 更新筛选结果显示
            if (appliedFilters.length > 0) {
                filterResults.style.display = 'flex';
                updateAppliedFiltersDisplay(appliedFilters);
            } else {
                filterResults.style.display = 'none';
            }
            
            // 应用筛选到每个相册
            albumItems.forEach(item => {
                let isVisible = true;
                
                // 分类筛选
                if (filterState.category !== 'all' && item.dataset.category !== filterState.category) {
                    isVisible = false;
                }
                
                // 图片数量筛选
                if (filterState.imageCount !== 'all' && item.dataset.imageCount !== filterState.imageCount) {
                    isVisible = false;
                }
                
                // 日期筛选
                if (filterState.date !== 'all' && item.dataset.date !== filterState.date) {
                    isVisible = false;
                }
                
                // 热门程度筛选
                if (filterState.popularity !== 'all') {
                    const itemsArray = Array.from(albumItems);
                    itemsArray.sort((a, b) => {
                        if (filterState.popularity === 'mostLiked') {
                            return b.dataset.likes - a.dataset.likes;
                        } else if (filterState.popularity === 'mostViewed') {
                            return b.dataset.views - a.dataset.views;
                        } else if (filterState.popularity === 'mostCommented') {
                            return b.dataset.comments - a.dataset.comments;
                        }
                        return 0;
                    });
                    
                    // 重新排序DOM元素
                    const container = albumContainer.querySelector('.row');
                    itemsArray.forEach(el => container.appendChild(el));
                }
                
                // 互动筛选
                if (filterState.interaction !== 'all') {
                    const likeBtn = item.querySelector('.like-btn');
                    const saveBtn = item.querySelector('.save-btn');
                    
                    if (filterState.interaction === 'liked' && !likeBtn.classList.contains('liked')) {
                        isVisible = false;
                    }
                    
                    if (filterState.interaction === 'saved' && !saveBtn.classList.contains('saved')) {
                        isVisible = false;
                    }
                    
                    // 评论筛选这里只是模拟，实际应用中需要根据真实数据判断
                    if (filterState.interaction === 'commented') {
                        // 这里简单判断评论数大于0
                        if (parseInt(item.dataset.comments) <= 0) {
                            isVisible = false;
                        }
                    }
                }
                
                // 搜索筛选
                if (filterState.searchQuery) {
                    const title = item.querySelector('.album-title').textContent.toLowerCase();
                    const desc = item.querySelector('.album-desc').textContent.toLowerCase();
                    const author = item.querySelector('.album-author').textContent.toLowerCase().replace(/\s/g, '');
                    
                    if (!title.includes(filterState.searchQuery) && 
                        !desc.includes(filterState.searchQuery) && 
                        !author.includes(filterState.searchQuery)) {
                        isVisible = false;
                    }
                }
                
                // 显示或隐藏相册
                if (isVisible) {
                    item.style.display = '';
                    visibleCount++;
                } else {
                    item.style.display = 'none';
                }
            });
            
            // 更新结果计数
            resultCount.textContent = visibleCount;
        }
        
        // 排序相册
        function sortAlbums(sortType) {
            const itemsArray = Array.from(albumItems).filter(item => item.style.display !== 'none');
            
            itemsArray.sort((a, b) => {
                switch (sortType) {
                    case 'newest':
                        // 按日期排序（新到旧）
                        const dateOrder = { 'today': 5, 'week': 4, 'month': 3, 'year': 2, 'older': 1 };
                        return dateOrder[b.dataset.date] - dateOrder[a.dataset.date];
                    case 'oldest':
                        // 按日期排序（旧到新）
                        const dateOrderOld = { 'today': 1, 'week': 2, 'month': 3, 'year': 4, 'older': 5 };
                        return dateOrderOld[b.dataset.date] - dateOrderOld[a.dataset.date];
                    case 'mostLiked':
                        return b.dataset.likes - a.dataset.likes;
                    case 'mostViewed':
                        return b.dataset.views - a.dataset.views;
                    default:
                        // 推荐排序（默认）
                        return 0;
                }
            });
            
            // 重新排序DOM元素
            const container = albumContainer.querySelector('.row');
            itemsArray.forEach(el => container.appendChild(el));
        }
        
        // 清除所有筛选条件
        function clearAllFilters() {
            // 重置所有筛选标签
            document.querySelectorAll('.filter-tag.active').forEach(tag => {
                tag.classList.remove('active');
            });
            
            document.querySelectorAll('.filter-tags .filter-tag[data-filter="all"]').forEach(tag => {
                tag.classList.add('active');
            });
            
            // 重置搜索框
            searchInput.value = '';
            
            // 重置筛选状态
            for (const key in filterState) {
                filterState[key] = key === 'searchQuery' ? '' : 'all';
            }
            
            // 重置排序
            sortSelect.value = 'recommended';
            
            // 应用筛选
            applyFilters();
        }
        
        // 更新已应用筛选条件的显示
        function updateAppliedFiltersDisplay(filters) {
            appliedFiltersContainer.innerHTML = '';
            
            filters.forEach(filter => {
                // 创建筛选标签元素
                const filterElement = document.createElement('div');
                filterElement.className = 'applied-filter';
                
                // 设置标签内容和图标
                let label = '';
                let icon = '';
                
                switch (filter.type) {
                    case 'category':
                        const categories = {
                            'travel': '旅行',
                            'photography': '摄影',
                            'food': '美食',
                            'pet': '宠物',
                            'art': '艺术',
                            'life': '生活'
                        };
                        label = categories[filter.value] || filter.value;
                        icon = '<i class="fas fa-tag"></i>';
                        break;
                    case 'imageCount':
                        const imageCounts = {
                            'single': '单张图片',
                            'multiple': '多张图片',
                            'none': '无图片'
                        };
                        label = imageCounts[filter.value] || filter.value;
                        icon = '<i class="fas fa-images"></i>';
                        break;
                    case 'date':
                        const dates = {
                            'today': '今天',
                            'week': '本周',
                            'month': '本月',
                            'year': '今年'
                        };
                        label = dates[filter.value] || filter.value;
                        icon = '<i class="fas fa-calendar"></i>';
                        break;
                    case 'popularity':
                        const popularity = {
                            'mostLiked': '最多点赞',
                            'mostViewed': '最多浏览',
                            'mostCommented': '最多评论'
                        };
                        label = popularity[filter.value] || filter.value;
                        icon = '<i class="fas fa-fire"></i>';
                        break;
                    case 'interaction':
                        const interactions = {
                            'liked': '我点赞的',
                            'saved': '我收藏的',
                            'commented': '我评论的'
                        };
                        label = interactions[filter.value] || filter.value;
                        icon = '<i class="fas fa-hand-pointer"></i>';
                        break;
                    case 'searchQuery':
                        label = `"${filter.value}"`;
                        icon = '<i class="fas fa-search"></i>';
                        break;
                }
                
                filterElement.innerHTML = `${icon} ${label} <i class="fas fa-times" data-type="${filter.type}"></i>`;
                
                // 添加删除单个筛选条件的事件
                filterElement.querySelector('i.fa-times').addEventListener('click', function(e) {
                    e.stopPropagation();
                    
                    // 重置对应类型的筛选条件
                    filterState[filter.type] = filter.type === 'searchQuery' ? '' : 'all';
                    
                    // 更新UI
                    if (filter.type === 'searchQuery') {
                        searchInput.value = '';
                    } else {
                        const filterGroup = document.getElementById(`${filter.type}Filters`);
                        filterGroup.querySelectorAll('.filter-tag').forEach(tag => {
                            tag.classList.remove('active');
                        });
                        filterGroup.querySelector('.filter-tag[data-filter="all"]').classList.add('active');
                    }
                    
                    // 重新应用筛选
                    applyFilters();
                });
                
                appliedFiltersContainer.appendChild(filterElement);
            });
        }
        
        // 初始化页面
        applyFilters();
    </script>
</body>
</html>
    
